<!-- 客户列表 -->
<template>
  <div class="DealerInfoStyle">
    <div class="cardAdmin">
      <div class="formContainer">
        <div class="formSearch">
          <span
            style="padding: 0 10px; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">名称：</span>
          <el-input style="flex: 3;" v-model="form.name"></el-input>
        </div>
        <div style="margin: auto 0 auto auto;padding-bottom: 5px;padding-right: 10px;">
          <el-button icon="el-icon-refresh" size="small" @click="resetForm()">重置</el-button>
          <el-button type="primary" icon="el-icon-search" size="small" @click="get_contactList()">搜索</el-button>
        </div>
        <div style="position: absolute;left: 10px;bottom: 5px;">
          <el-button type="success" icon="el-icon-circle-plus-outline" size="small" @click="addbtn()">新增客户</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <el-table :data="CompanyTable" border style="width: 100%;min-height: 78%;max-height: 78%;overflow: auto;">
      <el-table-column prop="id" label="id" width="60" fixed="left" align="center">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column prop="en_name" label="英文版名称" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column prop="tw_name" label="繁体版名称" width="auto" min-width="200px" align="center">
      </el-table-column>

      <el-table-column prop="city" label="城市" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column prop="en_city" label="英文版城市" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column prop="tw_city" label="繁体版城市" width="auto" min-width="200px" align="center">
      </el-table-column>

      <el-table-column prop="address" label="地址" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column prop="en_address" label="文版地址" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column prop="tw_address" label="繁体版地址" width="auto" min-width="200px" align="center">
      </el-table-column>

      <el-table-column prop="phone" label="手机号码" width="auto" min-width="120px" align="center">
      </el-table-column>
      <el-table-column prop="landline" label="座机号码" width="auto" min-width="120px" align="center">
      </el-table-column>
      <el-table-column prop="email" label="邮箱地址" width="auto" min-width="120px" align="center">
      </el-table-column>
      <el-table-column prop="add_time" label="添加时间" width="auto" min-width="140px" align="center">
      </el-table-column>

      <el-table-column label="操作" width="150" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button @click="tableEditing(scope.row)" type="primary" plain size="small">编辑</el-button>
          <el-button @click="del_contactDeletion(scope.row.id)" type="danger" plain size="small">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="text-align: right; margin-top: 5px;">
      <el-pagination background layout="prev, pager, next,total" :total="total" :page-size="pagesize"
        @current-change="current_change"></el-pagination>
    </div>

    <!-- 弹窗 -->
    <el-dialog :title="titles" :visible.sync="dialogVisible" width="70%" @close="handleClose" top="15vh">
      <div class="pop-up-form">
        <div class="form-options" style="">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">名称：</span>
          <el-input style="flex: 6;" v-model="addform.name"></el-input>

        </div>
        <div class="form-options" style="">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">英文版名称：</span>
          <el-input style="flex: 6;" v-model="addform.en_name"></el-input>
        </div>
        <div class="form-options" style="">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">繁体版名称：</span>
          <el-input style="flex: 6;" v-model="addform.tw_name"></el-input>
        </div>
        <div class="form-options">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">城市：</span>
          <el-input style="flex: 6;" v-model="addform.city"></el-input>
        </div>
        <div class="form-options">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">英文版城市：</span>
          <el-input style="flex: 6;" v-model="addform.en_city"></el-input>
        </div>
        <div class="form-options">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">繁体版城市：</span>
          <el-input style="flex: 6;" v-model="addform.tw_city"></el-input>
        </div>

        <div class="form-options">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">地址：</span>
          <el-input style="flex: 6;" v-model="addform.address"></el-input>
        </div>
        <div class="form-options">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">英文版地址：</span>
          <el-input style="flex: 6;" v-model="addform.en_address"></el-input>
        </div>
        <div class="form-options">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">繁体版地址：</span>
          <el-input style="flex: 6;" v-model="addform.tw_address"></el-input>
        </div>

        <div class="form-options">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">座机号码：</span>
          <el-input style="flex: 6;" v-model="addform.landline"></el-input>
        </div>
        <div class="form-options">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">手机号码：</span>
          <el-input style="flex: 6;" v-model="addform.phone"></el-input>
        </div>
        <div class="form-options">
          <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">邮箱地址：</span>
          <el-input style="flex: 6;" v-model="addform.email"></el-input>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button v-show="titles == '新增'" type="primary" @click="add_contactAdd()" size="small">确
          定</el-button>
        <el-button v-show="titles == '编辑'" type="primary" @click="upd_contactEditor()" size="small">更
          新</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { contactList, contactAdd, contactEditor, contactDeletion } from "@/utils/api";
export default {
  name: 'CompanyInfo',
  data() {
    return {
      form: {
        name: ''
      },
      addform: {
        name: '',
        en_name: '',
        tw_name: '',
        city: '',
        tw_city: '',
        en_city: '',
        address: '',
        tw_address: '',
        en_address: '',

        phone: '',
        landline: '',
        email: '',

      },
      CompanyTable: [],
      enableData: [{
        value: 0,
        label: '未使用'
      }, {
        value: 1,
        label: '已使用'
      }],
      dialogVisible: false,
      total: 100, //总条数
      pagesize: 10, //指定展示多少条
      currentPage: 1, //当前页码
      titles: '',
      roleHeadgear: null,

    };
  },
  mounted() {
    this.get_contactList()
  },

  methods: {
    handleFileChange(event) {
      this.roleHeadgear = event.target.files[0];
      if (this.roleHeadgear) {
        this.$message.success('上传成功')
      }
    },
    // 查询公司列表
    async get_contactList() {
      let data = JSON.parse(JSON.stringify(this.form));
      data.page = this.currentPage

      // 删除值为 "" 或 null 的字段
      Object.entries(data).forEach(([key, value]) => {
        if (value === "" || value === null) {
          delete data[key];
        }
      });
      console.log(this.form, 'get_contactList');

      const res = await contactList(data).catch((err) => {
        return console.error(err);
      });
      if (res.data && res.data.code == "200") {
        // this.$message.success(res.data.msg);
        this.CompanyTable = res.data.data
        this.total = res.data.total
      } else {
        this.$message.error(res.data.msg);
      }
    },
    // 新增公司
    async add_contactAdd() {
      let data = new FormData()
      Object.entries(this.addform).forEach(([key, value]) => {
        if (value === "" || value === null) {
          console.log(1);
        } else {
          data.append(key, value);
        }
      });
      if (this.roleHeadgear) {
        data.append('image', this.roleHeadgear);
      }
      const res = await contactAdd(data).catch((err) => {
        return console.error(err);
      });
      if (res.data && res.data.code == "200") {
        this.$message.success(res.data.msg);

        this.get_contactList()
        this.dialogVisible = false
        this.roleHeadgear = ''
      } else {
        this.$message.error(res.data.msg);
      }
    },
    // 更新公司
    async upd_contactEditor() {
      let data = new FormData()
      Object.entries(this.addform).forEach(([key, value]) => {
        data.append(key, value);
        if (key == 'image') {
          if (value == "" || value == null) {
            data.delete('image');
          }
        }
      });
      if (this.roleHeadgear) {
        data.append('image', this.roleHeadgear);
      }
      const res = await contactEditor(data).catch((err) => {
        return console.error(err);
      });
      if (res.data && res.data.code == "200") {
        this.$message.success(res.data.msg);
        this.dialogVisible = false

        this.get_contactList()
        this.roleHeadgear = ''
      } else {
        this.$message.error(res.data.msg);
      }
    },
    // 刪除公司
    async del_contactDeletion(id) {
      try {
        await this.$confirm("是否继续执行操作？", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        });

        let data = { id };
        const res = await contactDeletion(data).catch((err) => {
          return console.error(err);
        });

        if (res.data && res.data.code == "200") {
          this.$message.success(res.data.msg);
          this.dialogVisible = false;

          this.get_contactList();
        } else {
          this.$message.error(res.data.msg);
        }
      } catch (error) {
        // 用户点击取消或关闭对话框
        console.error(error);
      }
    },
    // 关闭弹窗时
    handleClose() {
      this.addform = {
        name: '',
        en_name: '',
        tw_name: '',
        city: '',
        tw_city: '',
        en_city: '',
        address: '',
        tw_address: '',
        en_address: '',

        phone: '',
        landline: '',
        email: '',
      }
    },
    handleClosetable() {

    },
    getMenuTypeText(isUsed) {
      const menuTypeMap = {
        '1': '查看',
        '2': '增加',
        '3': '修改',
        '4': '擅长',
      };

      return menuTypeMap[isUsed] || '未知类型';
    },
    // 分页
    current_change(currentPage) {
      this.currentPage = currentPage;
      this.get_contactList();
    },
    // 重置
    resetForm() {
      this.form = {
        name: ''
      }
      this.currentPage = 1
      this.get_contactList();
    },
    // 编辑打开时
    tableEditing(row) {
      this.titles = '编辑'
      this.dialogVisible = true

      this.addform.name = row.name
      this.addform.en_name = row.en_name
      this.addform.tw_name = row.tw_name

      this.addform.city = row.city
      this.addform.en_city = row.en_city
      this.addform.tw_city = row.tw_city

      this.addform.address = row.address
      this.addform.en_address = row.en_address
      this.addform.tw_address = row.tw_address

      this.addform.phone = row.phone
      this.addform.landline = row.landline
      this.addform.email = row.email



      this.addform.id = row.id
      console.log(row, 'row');
    },
    // 新增打开时
    addbtn() {
      this.dialogVisible = true;
      this.titles = '新增'
    },
    // 滑块开关状态
    async changeSwitch(row) {
      console.log(row);
      let data = {
        enable: row.enable,
        id: row.id,
        company_name_EN: row.company_name_EN,
        company_name_JP: row.company_name_JP,
        company_name_KR: row.company_name_KR,
        company_name_CN: row.company_name_CN,
        company_name_TC: row.company_name_TC,
        remark: row.remark,
      }
      const res = await contactEditor(data).catch((err) => {
        return console.error(err);
      });
      if (res.data && res.data.code == "200") {
        this.$message.success(res.data.msg);
        this.get_contactList()
      } else {
        this.$message.error(res.data.msg);
      }
    }
  },
};
</script>
<style>
.cell {
  font-size: 12px;
  white-space: nowrap !important;
}

.el-dialog__body {
  padding: 0 10px !important;
}

.demo-table-expand {
  font-size: 0;
  margin-left: 10px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<style lang="less" scoped>
.el-textarea {
  overflow: hidden;
  /* 隐藏滚动条 */
}

.DealerInfoStyle {
  width: 100%;
  padding: 0 10px;
  // background-color: aquamarine;
  height: calc(100vh - 100px);
  // border: 1px #000 solid;

  .cardAdmin {
    position: relative;
    // height: 18%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;

    border: #ebeef5 solid 1px;
    padding: 0 5px;
    margin-bottom: 2px;


    .formContainer {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      align-self: baseline;
      padding-bottom: 40px;
    }

    .formSearch {
      width: 25%;
      min-width: 25%;
      margin: 10px 0;
      height: 40px;
      display: flex;
      justify-content: center;
    }
  }

  .pop-up-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    align-self: baseline;
    margin: 10px 0;
    justify-content: center;
    padding-right: 15px;

    .form-options {
      width: 100%;
      min-width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      margin: 10px 0;
    }
  }
}
</style>
<style>
.cell {
  font-size: 12px;
  white-space: nowrap !important;
}

textarea {
  resize: none !important;
}
</style>